<script setup>
import { ref, onMounted } from 'vue';
import { getAllHospitalsService, addHospitalService, deleteHospitalService, updateHospitalService } from '@/api/hospital.js'; // 导入相关的API函数
import { ElMessage, ElMessageBox } from 'element-plus';

// 定义医院列表数据
const hospitals = ref([]);
const dialogVisible = ref(false);
const newHospital = ref({
    hospitalId: null,
    hospitalName: '',
    address: ''
});

// 获取所有医院信息的函数
const fetchHospitals = async () => {
    try {
        const response = await getAllHospitalsService(); // 获取所有医院信息
        if (response.code === 0) {
            hospitals.value = response.data; // 更新医院数据
        } else {
            ElMessage.error(response.message || '获取医院信息失败');
        }
    } catch (error) {
        ElMessage.error('获取医院信息失败');
    }
};

// 打开添加医院信息的对话框
const openAddDialog = () => {
    newHospital.value = { hospitalId: null, hospitalName: '', address: '' }; // 重置表单
    dialogVisible.value = true; // 显示对话框
};

// 添加医院信息的函数
const addHospital = async () => {
    try {
        const response = await addHospitalService(newHospital.value); // 直接传递医院对象
        if (response.code === 0) {
            ElMessage.success('添加成功');
            dialogVisible.value = false; // 关闭对话框
            fetchHospitals(); // 重新获取医院列表
        } else {
            ElMessage.error(response.message || '添加失败');
        }
    } catch (error) {
        ElMessage.error('添加失败');
    }
};

// 删除医院信息的函数
const deleteHospital = async (hospitalId) => {
    try {
        await ElMessageBox.confirm('确定要删除该院区吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        });
        const response = await deleteHospitalService(hospitalId);
        if (response.code === 0) {
            ElMessage.success('删除成功');
            fetchHospitals(); // 重新获取医院列表
        } else {
            ElMessage.error(response.message || '删除失败');
        }
    } catch (error) {
        ElMessage.error('删除失败');
    }
};

// 更新医院信息的函数
const updateHospital = async () => {
    try {
        const response = await updateHospitalService(newHospital.value); // 直接传递医院对象
        if (response.code === 0) {
            ElMessage.success('更新成功');
            dialogVisible.value = false; // 关闭对话框
            fetchHospitals(); // 重新获取医院列表
        } else {
            ElMessage.error(response.message || '更新失败');
        }
    } catch (error) {
        ElMessage.error('更新失败');
    }
};

// 打开更新医院信息的对话框
const openUpdateDialog = (hospital) => {
    newHospital.value = { ...hospital }; // 填充原始信息
    dialogVisible.value = true; // 显示对话框
};

// 在组件挂载时获取医院数据
onMounted(() => {
    fetchHospitals(); // 直接获取所有医院数据
});
</script>

<template>
    <div>
        <el-button type="primary" @click="openAddDialog">添加院区</el-button>
        <el-table :data="hospitals" style="width: 100%">
            <el-table-column prop="hospitalId" label="院区ID" width="100"></el-table-column>
            <el-table-column prop="hospitalName" label="院区名称" width="150"></el-table-column>
            <el-table-column prop="address" label="地址" width="250"></el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button size="mini" type="primary" @click="openUpdateDialog(scope.row)">更新</el-button>
                    <el-button size="mini" type="danger" @click="deleteHospital(scope.row.hospitalId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加医院信息的对话框 -->
        <el-dialog
            v-model="dialogVisible"
            title="添加/更新院区信息"
            width="400px"
        >
            <el-form :model="newHospital" label-width="120px">
                <el-form-item label="医院ID">
                    <el-input v-model="newHospital.hospitalId" placeholder="请输入医院ID"></el-input>
                </el-form-item>
                <el-form-item label="院区名称">
                    <el-input v-model="newHospital.hospitalName" placeholder="请输入院区名称"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="newHospital.address" placeholder="请输入地址"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="newHospital.hospitalId ? updateHospital() : addHospital()">确 定</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<style scoped>

</style>
